<!--
 * @Author: your name
 * @Date: 2021-04-22 13:41:46
 * @LastEditTime: 2021-04-26 08:57:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \layuimini\page\video.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/bat.css">
  <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
  <style>
    ::-webkit-scrollbar {
      width: 2px;
      height: 2px;
      background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-thumb {
      background-color: #999;
    }

    ::-webkit-scrollbar-track {
      background-color: #F5F5F5;
    }

    .main {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 4px solid #cad2c7;
      display: flex;
    }

    .left {
      width: 292px;
      height: 100%;
      background-color: #eeeeee;
      padding: 14px 0 0 14px;
      overflow-y: auto;
    }

    .right {
      width: calc(100% - 300px);
      padding: 14px;
    }

    .video {
      width: 100%;
      height: 100%;
    }

    .video video{
      width: 100%;
      height: 100%;
    }

    .layui-tree-icon {
      width: 16px;
      height: 16px;
    }
  </style>
</head>

<body>
  <div class="main">
    <div class="left">
      <span style="font-size: 16px;font-weight: bold;">宛陵林场</span>
      <div id="test2" class="demo-tree"></div>
    </div>

    <div class="right">
      <div class="video">
        <video width="condition" controls="controls" type="video/mp4" autoplay="autoplay" loop="loop" muted="muted" >
          <!-- autoplay自动播放 controls播放控件 loop循环播放 poster加载等待画面 muted 静音播放(解决谷歌禁用自动播放) -->
          <source src="https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4" type="video/mp4">
          您的浏览器太low了,不支持播放
        </video>
      </div>
    </div>
  </div>
</body>

<script src="../lib/layui-v2.6.3/layui.js"></script>
<script>
  layui.use(['tree', 'util'], function () {
    var tree = layui.tree,
      layer = layui.layer,
      util = layui.util,
      //模拟数据
      data = [
      ],

      //模拟数据1
      data1 = [
        {
          title: '高立洪分场',
          id: 1
        },
        {
          title: '麻姑山分场',
          id: 2,
          children: [
            {
              title: '三座窑管护站',
              id: 21,
              children: [
                {
                  title: '普通-望火楼',
                  id: 221,
                },
                {
                  title: '普通-望牛墩',
                  id: 222,
                },
                {
                  title: '普通-金鑫矿业',
                  id: 223,
                }
              ]
            },
            {
              title: '普通-场部',
              id: 22
            },
            {
              title: '普通-场部1',
              id: 23
            },
            {
              title: '丹山管护站',
              id: 24,
              children: [
                {
                  title: '普通-杉树冲',
                  id: 241,
                },
                {
                  title: '普通-老沟',
                  id: 242,
                },
                {
                  title: '普通-茶叶冲',
                  id: 243,
                },
                {
                  title: '普通-葫芦冲',
                  id: 244,
                }
              ]
            },
            {
              title: '十四公里管护站',
              id: 25,
              children: [
                {
                  title: '普通-三里冲',
                  id: 251,
                },
                {
                  title: '普通-大坝冲',
                  id: 252,
                },
                {
                  title: '普通-大学水库',
                  id: 253,
                },
                {
                  title: '普通-小王村',
                  id: 254,
                },
                {
                  title: '普通-跨皮山',
                  id: 255,
                }
              ]
            },
            {
              title: '九公里管护站',
              id: 26,
              children: [
                {
                  title: '普通-九公里管护站冲',
                  id: 261,
                },
                {
                  title: '普通-九女石场',
                  id: 262,
                }
              ]
            }
          ]
        },
        {
          title: '青隐山分场',
          id: 3,
        },
        {
          title: '夏渡分场',
          id: 4,
          children: [
            {
              title: '普通-七里岗',
              id: 41,
            },
            {
              title: '普通-六秀庵管护站',
              id: 42,
            },
            {
              title: '普通-六秀庵管护站',
              id: 43,
            },
            {
              title: '普通-漕塘管护站',
              id: 44,
            },
            {
              title: '普通-漕塘管护站',
              id: 45,
            },
            {
              title: '夏渡管护站',
              id: 46,
            }
          ]
        },
        {
          title: '杨林分场',
          id: 5,
          children: [
            {
              title: '普通-五龙寺老树坡1',
              id: 51,
            },
            {
              title: '普通-五龙寺老树坡2',
              id: 52,
            },
            {
              title: '普通-大冲球机',
              id: 53,
            },
            {
              title: '普通-新农村管护站',
              id: 54,
            },
            {
              title: '普通-望火楼云台近',
              id: 55,
            },
            {
              title: '普通-望火楼云台远',
              id: 56,
            },
            {
              title: '普通-望火楼球机',
              id: 57,
            },
            {
              title: '普通-杨林场部',
              id: 58,
            },
            {
              title: '普通-水泥路和前进队路交口近',
              id: 59,
            },
            {
              title: '普通-水泥路和前进队路交口远',
              id: 511,
            },
            {
              title: '普通-油茶基地路口近',
              id: 512,
            },
            {
              title: '普通-油茶基地路口远',
              id: 513,
            },
            {
              title: '普通-王村与辽叶沟交口近',
              id: 514,
            },
            {
              title: '普通-王村与辽叶沟交口远',
              id: 515,
            },
            {
              title: '普通-老职工宿舍近',
              id: 516,
            },
            {
              title: '普通-老职工宿舍远',
              id: 517,
            },
            {
              title: '普通-许村防火点1',
              id: 518,
            },
            {
              title: '普通-许村防火点2',
              id: 519,
            },
            {
              title: '普通-长里岗管护站新办公点',
              id: 520,
            },
            {
              title: '普通-长里岗管护站球机1',
              id: 521,
            },
            {
              title: '普通-长里岗管护站球机2',
              id: 522,
            },
            {
              title: '普通-防火带枪机1',
              id: 523,
            },
            {
              title: '普通-防火带枪机2',
              id: 524,
            }
          ]
        }


      ]

    //手风琴模式
    tree.render({
      elem: '#test2',
      data: data1,
      onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
      click: function (obj) {
        layer.msg(JSON.stringify(obj.data));
      }
    });

  });
</script>

</html>